import React from 'react';
import { Input, Radio, DatePicker } from 'antd';

const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const TemplateInfo = (props) => (
  <div className="integration-info">
    <div className="flex-item mb20">
      <label className="info-name">Title:</label>
      <div className="info-input">
        <Input />
      </div>
    </div>
    <div className="flex-item mb20">
      <label className="info-name">Target User:</label>
      <div className="info-input">
        <RadioGroup
          onChange={props.onChange}
          value={props.value}>
          <Radio value={1}>All</Radio>
          <Radio value={2}>New</Radio>
          <Radio value={3}>Old</Radio>
        </RadioGroup>
      </div>
    </div>
    <div className="flex-item mb20">
      <label className="info-name">Available Time:</label>
      <div className="info-input">
        <RangePicker
          className="select-item"
          style={{width: '100%'}}
          showTime={{ format: 'HH:mm' }}
          format="YYYY-MM-DD HH:mm"
          placeholder={['Start Time', 'End Time']}
          onOk={props.timeOnChange}
          onChange={props.timeChange}
          value={props.timeValue}
        />
      </div>
    </div>
    <div className="flex-item mb20">
      <label className="info-name">Note(Option):</label>
      <div className="info-input">
        <TextArea
          className="select-item"
          autosize={{ minRows: 2, maxRows: 6 }} />
      </div>
    </div>
  </div>
)
export default TemplateInfo;
